Ext.require([
    'Ext.chart.*',
    'Ext.Window', 
    'Ext.fx.target.Sprite', 
    'Ext.layout.container.Fit', 
    'Ext.window.MessageBox'
]);

function createStore(){
	
	/*Store is loaded using data in sourceEvent DB*/
	var store = Ext.create('Ext.data.JsonStore', {   
		autoLoad : false, 
		fields : ['date', 'kilometers'], 
		proxy : {
			type : 'ajax',
			url : '/../Cafca/OdometerServlet', 
			reader : {
				type : 'json', 
				root : 'data', 
			},
			extraParams : {
				'param' : 'value' // On force l'appel au servlet en lui passant des params random. 
			}
		}
	});
	
	store.load(); 
	return store; 
}

Ext.onReady(function() {
	
	store = createStore();
	
	var chart = Ext.create('Ext.chart.Chart', {
		style : 'background:#fff', 
		animate : true, 
		store : store, 
		shadow : true, 
		theme : 'Category1', 
		legend : {position : 'right'}, 
		axes : [
	        {
	        	type : 'Numeric', 
	        	minimum : 0,  
	        	position : 'left', 
	        	fields : ['kilometers'], 
	        	title : 'Kilometers',
	        	minorTickSteps : 5,
	        	grid : {
	        		odd : {
	        			opacity : 1, 
	        			fill : '#ddd', 
	        			stroke : '#bbb', 
	        			'stroke-width' : 0.5
	        		}
	        	}
	        }, 
	        {
	        	type : 'Time', 
	        	position : 'bottom', 
	        	fields : ['date'], 
	        	title : 'Date',
	        	dateFormat : 'M d', 
	        	groupBy : 'year,month,day'
	        }
        ], 
        series : [
              {
            	  type : 'line', 
            	  highlight: {
                      size: 7,
                      radius: 7
                  }, 
                  axis : 'left', 
                  xField : 'date', 
                  yField : 'kilometers', 
                  tips : {
                	  trackMouse : true, 
                	  width : 200, 
                	  renderer : function(storeItem, item){
                		  this.setTitle(' ' +storeItem.get('kilometers') + ' kilometers on ' + storeItem.get('date')); 
                	  }
                  },
                  markerConfig : {
                	  type : 'cross', 
                	  size : 4, 
                	  radius : 4, 
                	  'stroke-width' : 0
                  }
              }
        ]
	});
	
	var win = Ext.create('Ext.Window', {
		width : 800, 
		height : 600, 
		hidden : false, 
		maximizable : true, 
		title : 'Odometer', 
		renderTo : Ext.getBody(), 
		layout : 'fit', 
		tbar : [
	        {
	        	text : 'Save graph', 
	        	handler : function(){
	        		Ext.MessageBox.confirm('Confirm', 'Save as an image ?', function(choice){
	        			if(choice == 'yes'){
	        				chart.save({
	        					type : 'image/png'
	        				});
	        			}
	        		});
	        	}
	        }
        ], 
        items : chart
	});
	
}); 